<template>
  <div class="task-more">
    <el-tabs tab-position="left">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-bell"></i> 待办任务</span>
        <!-- <task-table :tabelData="pendingTaskList" :is-hand="false"></task-table> -->
        <task-table-p
          :tabelData="pendingTaskList"
          :total="penddingTotal"
          :is-hand="false"
          @handPage="handPage"
        ></task-table-p>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 已办任务</span>
        <!-- <task-table :tabelData="handTaskList" :is-hand="true"></task-table> -->
        <task-table-p
          :tabelData="handTaskList"
          :total="hasTotal"
          :is-hand="true"
          @handPage="handPage"
        ></task-table-p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getPendingTaskInfo } from "@/api/work.js";
import { TaskIng, getHasApproves } from "@/api/workflow.js";
import { parseTime } from "@/utils/index.js";
export default {
  name: "IndexCenter",
  components: {
    TaskTable: () => import("./components/TaskTable.vue"),
    "task-table-p": () => import("./components/TaskTable_p.vue")
  },
  data() {
    return {
      pendingTaskList: [],
      handTaskList: [],
      hasTotal: 0, // 已办总数
      penddingTotal: 0 // 待办总数
    };
  },
  computed: {
    ...mapGetters(["id"])
  },
  mounted() {
    this.requestTaskList();
    this.requestPenddingTask();
  },
  methods: {
    handPage(isHand, page) {
      if (isHand) {
        this.requestTaskList(page);
      } else {
        this.requestPenddingTask(page);
      }
    },
    requestTaskList(page = 1) {
      // 请求已办任务
      getHasApproves(this.id, "TK", page).then(res => {
        this.handTaskList = this.formData(res.data.data, "createTime");
        this.hasTotal = res.data.count;
      });
      // // 请求待办任务
      // getPendingTaskInfo(this.id, 0).then(res => {
      //   this.pendingTaskList = this.formData(res.data.results, 'end_time')
      // })
      // // 请求已办任务
      // getPendingTaskInfo(this.id, 1).then(res => {
      //   this.handTaskList = this.formData(res.data.results, 'end_time')
      // })
    },
    requestPenddingTask(page = 1) {
      // 请求待办任务
      TaskIng(this.id, "TK", page).then(res => {
        this.pendingTaskList = this.formData(res.data.data, "createTime");
        this.penddingTotal = res.data.count;
      });
    },
    formData(data = [], param) {
      data.forEach(e => {
        e.time = parseTime(e[param]);
      });
      return data;
    }
  }
};
</script>
<style lang="scss">
.task-more {
  padding: 20px 0;

  .el-tabs__nav-scroll {
    padding: 0;
  }
  .el-tabs--left {
    @media only screen and (max-width: 500px){
      .el-tabs__header.is-left {
      width: 120px !important;
    }
    }
    .el-tabs__header.is-left {
      width: 140px;
    }
    .el-tabs__nav-wrap.is-left {
      height: 120px;
    }
  }
}
</style>
<style>
</style>
